<template>
	<view>
		<lineNew></lineNew>
		<view class="list">

			<scroll-view scroll-y="true" class="list-left" :style="'height:'+swHeight+'px;'">
				<view v-for="(item,index) in leftData" :key='index' class="left-item" @tap="changeTap(index,item.id)">
					<view class="left-name" :class=" acviteIndex===index?'left-name-active':''">
						{{item.name}}
					</view>
				</view>
			</scroll-view>


			<scroll-view scroll-y="true" class="list-right" :style="'height:'+swHeight+'px;'">
				<view class="right-item" v-for="(item,index) in rightData" :key="index">
					<block v-for="(k,i) in item" :key='i'>
						<view class="item-title">{{k.name}}</view>
						<view class="right-content">
							<view class="right-list" v-for="(u,w) in k.list" :key="w">
								<image class="right-img" :src="u.imgUrl"></image>
								<view class="right-name">{{u.name}}</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>


		</view>
		<tabbar cureentPage='list'></tabbar>
	</view>
</template>

<script>
	import $http from "@/common/api/request.js"
	import Tabbar from "@/component/common/tabbar.vue"
	import lineNew from '@/component/line.vue'
	export default {
		data() {
			return {
				swHeight: 0,
				acviteIndex: 0,
				leftData: [],
				rightData: []
			}
		},
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: "pages/search/search"
			})
		},
		components: {
			lineNew,
			Tabbar
		},
		onLoad() {
			this.getData()
		},

		// 获取可是高度
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.swHeight = res.windowHeight - this.getSystemHeight();
				}
			})
		},
		methods: {
			getSystemHeight() {
				const res = uni.getSystemInfoSync();
				console.log(res.platform, res.statusBarHeight)
				const system = res.platform;
				if (system === 'ios') {
					return 44 + res.statusBarHeight;
				} else if (system === ' android') {
					return 48 + res.statusBarHeight;
				} else {
					return 0;
				}
			},
			changeTap(index, id) {
				this.getData(id)
				this.acviteIndex = index;
			},
			getData(id) {
				if (id === (this.acviteIndex + 1)) {
					return;
				}
				$http.request({
					url: '/goods/list',
				}).then((res) => {
					// console.log(res)
					let leftData = []
					let rightData = []
					res.forEach(v => {
						// console.log(v.name)
						leftData.push({
							id: v.id,
							name: v.name
						})
						if (v.id === (this.acviteIndex + 1)) {
							rightData.push(v.data)
						}
					})
					this.leftData = leftData;
					this.rightData = rightData;
				}).catch(() => {
					uni.showToast({
						title: "请求失败",
						icon: "none"
					})
				})
			}
		}

	}
</script>

<style>
	.list {
		display: flex;
	}

	.list-left {
		width: 200rpx;

	}

	.left-item {
		border: 2rpx solid whitesmoke;
		font-size: 20rpx;
		font-weight: bold;
		background-color: #f7f7f7;
	}

	.left-name {
		padding: 30rpx 6rpx;
		text-align: center;
	}

	.left-name-active {
		border-left: 8rpx solid skyblue;
		background-color: #f78869;
	}

	.list-right {
		flex: 1;
	}

	.item-title {
		font-weight: bold;
		padding: 30rpx 0;
	}

	.right-content {
		display: flex;
		flex-wrap: wrap;
	}

	.right-img {
		width: 150rpx;
		height: 150rpx;
	}

	.right-name {
		padding: 16rpx 0;
	}

	.right-list {
		width: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 16rpx;
	}
</style>
